import { PlusOutlined, CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import {
    Button,
    Form,
    Input,
    Radio,
    Select,
    notification
} from 'antd';
import React, { useState, useEffect } from 'react';
// 动态路由接参
import { useParams } from 'react-router-dom';
import "./addcom.scss"
// 导入axios封装好的请求
import { add } from '../../../api/mxh';
import { details } from '../../../api/mxh';
import { list_exits } from '../../../api/mxh';
// 导入路由信息勾子函数
import { useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
const AddCom = () => {
    const [componentDisabled, setComponentDisabled] = useState<boolean>(false);
    const [show, setshow] = useState(true)
    const [show1, setshow1] = useState(true)
    const [form] = Form.useForm();
    const navigate = useNavigate()
    const flag = useSelector((state: any) => state.flag.flag)
    var id = useParams().id
    useEffect(() => {
        Deatils_list()
    })
    const Deatils_list = async () => {
        var res = await details({ id })
        if (res.data.code == 200) {
            console.log(res.data.data);
            form.setFieldsValue(res.data.data[0])
        }
    }
    const onChange = () => {

    }
    const onChange1 = () => {

    }
    const shows = () => {
        setshow(!show)
    }
    const shows1 = () => {
        setshow1(!show1)
    }
    // 当取消按钮被点击的时候
    const revocation = () => {
        // 跳转到商品页面
        navigate("/index/commanage")
    }
    // 当验证通过时增加商品
    const onFinish = async (values: any) => {
        if (flag) {
            var res = await add(values)
            if (res.data.code == 200) {
                notification.success({ message: '增加商品成功' })
                navigate("/index/commanage")
            } else {
                notification.error({ message: '增加商品失败' })
            }
        } else {
            var res = await list_exits(values)
            console.log(res);
            if (res.data.code == 200) {
                notification.success({ message: '编辑商品成功' })
                navigate("/index/commanage")
            } else {
                notification.error({ message: '编辑商品失败' })
            }
        }

    }
    return (
        <div className='addcom'>
            <Form
                form={form}
                labelCol={{ span: 9 }}
                wrapperCol={{ span: 18 }}
                layout="horizontal"
                disabled={componentDisabled}
                style={{ maxWidth: 400 }}
                onFinish={onFinish}
            >
                {/* 商品详情 */}
                <div className='add_title'>   {flag ? "新增商品详情" : "编辑商品详情"} </div>
                <div className='add_deatil'>
                    <Form.Item
                        label="id"
                        name="id"
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品名称"
                        name="shopping_name"
                        rules={[{ required: true, message: '请输入商品名称!' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="商品备注"
                        name="shopbei"
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="商品分类"
                        name="shopping_classification"
                    >
                        <Select>
                            <Select.Option value="手机">手机</Select.Option>
                            <Select.Option value="笔记本">笔记本</Select.Option>
                            <Select.Option value="耳机">耳机</Select.Option>
                            <Select.Option value="键盘">键盘</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="商品价格" style={{ marginBottom: 0 }}>
                        <Form.Item
                            name=" shopping_prices"
                            rules={[{ required: true }]}
                            style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
                        >
                            <Input placeholder="促销价格" />
                        </Form.Item>
                        <Form.Item
                            name="shopping_price"
                            rules={[{ required: true }]}
                            style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
                        >
                            <Input placeholder="商品原价" />
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label="服务承诺" name="promise">
                        <Radio.Group onChange={onChange} >
                            <Radio value={1}>赠送运费险</Radio>
                            <Radio value={2}>七天无理由退款</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="是否上架" name="Onshelf_state">
                        <Radio.Group onChange={onChange1} >
                            <Radio value={1}>上架</Radio>
                            <Radio value={2}>下架</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="商品链接"
                        name="img"
                        rules={[{ required: true, message: '请输入商品链接!' }]}
                    >
                        <Input />
                    </Form.Item>
                </div>

                {/* 商品参数 */}
                <div className='add_title title1' style={{ color: "rgb(67, 141, 238)" }}> 商品参数
                    <span onClick={shows}>
                        {
                            !show ?
                                <CaretDownOutlined style={{ color: "rgba(67, 141, 238, 1)" }} /> :
                                <CaretUpOutlined style={{ color: "rgba(67, 141, 238, 1)" }} />
                        }
                    </span>
                </div>
                <div className='add_deatil deatil1' style={!show ? { height: 0 } : { height: 460 }}>
                    <div>
                        <Form.Item label="保修期" name="Warranty_date">
                            <Select>
                                <Select.Option value="6">6个月</Select.Option>
                                <Select.Option value="8">8个月</Select.Option>
                                <Select.Option value="12">12个月</Select.Option>
                                <Select.Option value="24">一年</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="套餐类型" name="package">
                            <Select>
                                <Select.Option value="0">官方标配</Select.Option>
                                <Select.Option value="1">标准套餐一</Select.Option>
                                <Select.Option value="2">标准套餐二</Select.Option>
                                <Select.Option value="3">标准套餐三</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="生产企业"
                            name="Production"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label="是否线控" name="Wires">
                            <Radio.Group onChange={onChange} >
                                <Radio value={1}>是</Radio>
                                <Radio value={2}>否</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="佩戴方式"
                            name="Way"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="耳机售后服务"
                            name="Earphone"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="缆线长度"
                            name="lengths"
                        >
                            <Input />
                        </Form.Item>
                    </div>
                    <div>
                        <Form.Item label="兼容平台：" name="compatibility">
                            <Select>
                                <Select.Option value="android">android</Select.Option>
                                <Select.Option value="ios">ios</Select.Option>
                                <Select.Option value="android ios">android ios</Select.Option>
                            </Select>
                        </Form.Item>
                        <Form.Item
                            label="灵敏度："
                            name="sensitivity"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="阻抗："
                            name="impedance"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="频响范围："
                            name="Frequency"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label="有无麦克风：" name="Wire">
                            <Radio.Group onChange={onChange} >
                                <Radio value={0}>带麦</Radio>
                                <Radio value={1}>不戴麦</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="插入直径"
                            name="Insertion"
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="颜色分类"
                            name="color"
                        >
                            <Input />
                        </Form.Item>
                    </div>
                </div>
                {/* 商品概述 */}
                <div className='add_title title1' style={{ color: "rgb(67, 141, 238)" }}> 商品概述
                    <span onClick={shows1}>
                        {
                            !show1 ?
                                <CaretDownOutlined style={{ color: "rgba(67, 141, 238, 1)" }} /> :
                                <CaretUpOutlined style={{ color: "rgba(67, 141, 238, 1)" }} />
                        }
                    </span>
                </div>
                <div className='add_deatil deatil1' style={!show1 ? { height: 0 } : { height: 200 }}>
                    <Form.Item
                        label="商品概述链接"
                        name="shopdetlink"
                        rules={[{ required: true, message: '请输入商品概述链接!' }]}
                    >
                        <Input />
                    </Form.Item>

                </div>
                <div className='add_title title2'>

                    <Form.Item>
                        <Button type="primary">预览</Button>
                        <Button type="primary" htmlType="submit">
                            {flag ? "新增" : "编辑"}
                        </Button>
                        <Button onClick={revocation}>取消</Button>
                    </Form.Item>
                </div>
            </Form>
        </div>
    )
}

export default AddCom;